<template>
  <div class="icons">
    <div class="menu" @mouseleave="hide">
      <q-icon :name="biMegaphone" color="black" size="18px" style="transform: scaleX(-1)" @mousemove="show"></q-icon>
        <transition name="slide-fade">
        <div class="sss" v-show="visiable">
        <div class="sub-menu shadow-4">
          <a href="javascript:;" class="a-text sub-inner inner">
            <q-icon :name="biTelephone" color="black" size="18px"></q-icon>
            <div>
              <p class="title">Contact Sales</p>
              <a href="tel:(626) 380-6628" class="sub-text Directions">(626) 380-6628</a>
            </div>
          </a>

          <a href="javascript:;" class="a-text sub-inner inner">
            <q-icon :name="fasLocationDot" color="black" size="18px"></q-icon>
            <div>
              <p class="title">Address</p>
              <p class="advice">4459 Rowland Ave El Monte CA 91731-1121</p>
              <p class="Directions" @click="open_address">Directions</p>
            </div>
          </a>

          <a href="javascript:;" class="a-text sub-inner inner">
            <q-icon :name="fasGlobe" color="black" size="18px"></q-icon>
            <div>
              <p class="title">Websites</p>
              <p class="sub-text">A PLUS INC   ASI# 30307</p>
              <p class="sub-text Directions" @click="open_websites">https://aplusmaxinc.espwebsite.com</p>
            </div>
          </a>
        </div>
      </div>
        </transition>
    </div>

    <hr style="margin: 0; width: 100%">
    <div class="menu-other">
      <a href="mailto:info@aplusmaxinc.com?subject=I'm interested in your products: APMK123456&cc=&body=Hello,">
        <q-icon :name="fasEnvelope" color="black" size="18px"></q-icon>
      </a>
    </div>
  </div>
</template>


<script setup lang='ts'>
import { defineProps, defineEmits, defineExpose } from 'vue'

const open_address = () => {
  window.open('https://maps.app.goo.gl/a9Fd95W8RxuSFfpd8')
}

const open_websites = () => {
  window.open('https://aplusmaxinc.espwebsite.com')
}
defineProps({
})

const emit = defineEmits([])

defineExpose({})

import {biHeadset, biMegaphone, biPen, biTelephone} from '@quasar/extras/bootstrap-icons'
import {fasEnvelope, fasLocationDot, fasGlobe} from '@quasar/extras/fontawesome-v6'

import { ref } from 'vue'
const visiable = ref(false) // 是否显示组件
const show = () => {
  visiable.value = true
}
const hide = () => {
  visiable.value = false
}

</script>

<style scoped lang='less'>
.icons {
  position: fixed;
  right: 3rem;
  bottom: 11rem;
  width: 3rem;
  padding: 8px;
  background-color: white;
  box-shadow: 0 4px 10px 0 hsla(220, 4%, 56%, .2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.icons > .icon {
  color: #1abc9c;
}
.icons:hover > .icon {
  display: none;
}
.q-icon{
  cursor: pointer;
}
.menu{
  padding: 5px 20px 10px 20px
}
.menu-other{
  padding: 10px 20px 5px 20px
}
.sss{
  position: absolute;
  top: -1.6rem;
  font-size: 14px;
  right: calc(100% - 8px);
  transform: scale(.95);
  transform-origin: right;
  transition: opacity .4s, transform .3s ease-out;
  //visibility: hidden;
  border-radius: 8px;
  display: block;
  line-height: 40px;
  min-width: 220px;
  white-space: nowrap;
  bottom: 0;
  margin-bottom: -105px;
  padding-right: 20px;
  &:before{
    border: 8px solid transparent;
    border-left-color: #fff;
    content: " ";
    height: 0;
    left: calc(100% - 20px);
    margin-top: -20px;
    position: absolute;
    top: 28%;
    width: 0;
  }
}
.sub-menu{
  background-color: #fff;
  border-radius: 8px;
  //box-shadow: 0 4px 10px 0 hsla(220, 4%, 56%, .2);
  display: block;
  line-height: 40px;
  min-width: 220px;
  padding: 14px 0px 14px 0;
  white-space: nowrap;
  .sub-inner.inner{
    height: auto;
    line-height: 20px;
    padding-bottom: 10px;
    padding-top: 10px;
  }
  .sub-inner{
    height: 44px;
    line-height: 44px;
    padding-right: 50px;
    position: relative;
    text-align: left;
  }
  .a-text{
    display: flex;
    align-items: center;
    &:hover{
      background-color: #e7e7e7;
    }
    .q-icon{
      margin: 0 20px 0 20px;
    }
    p{
      font-size: 14px;
      line-height: 20px;
      font-weight: 700;
    }
    .title{
      color: #191919;
      font-size: 16px;
      font-weight: 600;
      line-height: 22px;
      .hightLight{
        &:hover{
          font-weight: bolder;
          color: #26A69A;
        }
      }
    }
    .advice{
      font-size: 14px;
      font-weight: 400;
    }
    .Directions{
      &:hover{
        font-weight: bolder;
        color: #26A69A;
      }
    }
  }
}
</style>